<template>
  <br>
  <!-- <input 
    type="text" 
    :value="modelValue"
    @input="emit('update:model-value',$event.target.value)"
    > -->
  <br>
  用户名：
  <input 
    type="text" :value="abc" @input=" emit('update:abc',$event.target.value)">
  地址：
  <input type="text" :value="xyz" @input=" emit('update:xyz',$event.target.value)">
</template>

<script setup lang="ts" name="AtguiguInput">
 
 //接收 prop 这个modelValue 是默认的
 defineProps(['modelValue','abc','xyz'])
 //声明事件
 const emit = defineEmits(['update:abc','update:xyz'])
</script>

<style scoped>
  input {
    border: 2px solid black;
    background-image: linear-gradient(45deg,red,yellow,green);
    height: 30px;
    font-size: 20px;
    color: white;
  }
</style>